<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <style type="text/css">
            /*            #headerCanvas {background-color: gray; margin-left: 50px;}*/
            #startCanvas {margin-left: 50px; position: absolute; z-index: 3}
            #mainCanvas {background-color: black; margin-left: 50px; position: absolute;  z-index: 1}
            #spaceCanvas { margin-left: 50px; position: absolute; z-index: 2}
        </style>
        <script>document.title="SpaceInvaders";</script>

    </head>
    <body onkeypress = "spaceObj.checkKey(event)">
        <canvas id="startCanvas" width="1240" height="640" >
        </canvas>
        <!--<input type="button" value="Start Game" onclick="load()" style="z-index:4" />-->
        <canvas id="mainCanvas" width="1240" height="640" ></canvas>
        <canvas id="spaceCanvas" width="1240" height="640" ></canvas>
        <audio id="shootSound">
            <source src="shoot.wav" type="audio/wav">
        </audio> 
        <audio id="explosionSound">
            <source src="explosion.wav" type="audio/wav">
        </audio> 
        <audio id="killSound">
            <source src="invaderkilled.wav" type="audio/wav">
        </audio> 
        <script src="JS/Controller.js"></script>
        <script src="JS/Spaceship.js"></script>
        <script src="JS/Enemy.js"></script>
        <script src="JS/Grid.js"></script>
        <script src="JS/Bullet.js"></script>
        <script>
            spaceObj=new Spaceship();
            startGame();
            
        </script>
    </body>
</html>
